<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';
import { useRouter } from 'vue-router';
import { useUserStore } from '../stores';

const router = useRouter();
const userStore = useUserStore();
const username = ref('');
const password = ref('');
const errorMessage = ref('');
const showPassword = ref(false); // 控制密码是否可见
const isLoading = ref(false);

// 在组件挂载时添加body类，卸载时移除
onMounted(() => {
  document.body.classList.add('login-active');
});

onUnmounted(() => {
  document.body.classList.remove('login-active');
});

// 切换密码可见性
const togglePasswordVisibility = () => {
  showPassword.value = !showPassword.value;
};

const handleSubmit = async () => {
  // 表单验证
  if (!username.value || !password.value) {
    errorMessage.value = '请填写用户名和密码';
    return;
  }

  isLoading.value = true;
  errorMessage.value = '';

  try {
    const result = await userStore.login({
      username: username.value,
      password: password.value
    });

    if (result.success) {
      showMessage('登录成功！即将跳转...');
      setTimeout(() => {
        router.push('/');
      }, 1500);
    } else {
      errorMessage.value = result.error || '登录失败';
    }
  } catch (error) {
    errorMessage.value = '登录失败，请检查用户名和密码';
  } finally {
    isLoading.value = false;
  }
};

// 消息提示功能
const showMessage = (message: string) => {
  const messageElement = document.createElement('div');
  messageElement.className = 'fixed top-20 left-1/2 transform -translate-x-1/2 bg-gray-800 text-white px-6 py-3 rounded-lg shadow-lg z-50 transition-opacity duration-300';
  messageElement.textContent = message;
  
  // 添加到页面
  document.body.appendChild(messageElement);
  
  // 2秒后淡出
  setTimeout(() => {
    messageElement.style.opacity = '0';
    setTimeout(() => {
      document.body.removeChild(messageElement);
    }, 300);
  }, 2000);
};
</script>

<template>
  <div class="min-h-screen flex flex-col login-container" style="background-color: #f8f8f8;">
    <!-- 登录表单 - 居中显示 -->
    <div class="flex-1 flex flex-col items-center justify-center">
      <!-- 头像和欢迎文字 -->
      <div class="mb-8 text-center">
        <div class="inline-flex items-center justify-center h-24 w-24 rounded-full bg-rose-100 mb-4"></div>
        <h1 class="text-3xl font-bold text-gray-800">欢迎登录</h1>
        <p class="text-gray-600 mt-1">美好的一天，从鲜花开始</p>
      </div>
      
      <!-- 登录框容器 -->
      <div class="bg-white rounded-lg shadow-md p-8 w-full max-w-md mx-auto">
        <h2 class="text-xl font-medium text-center mb-6">账号登录</h2>
        
        <form @submit.prevent="handleSubmit">
          <!-- 用户名 -->
          <div class="mb-4">
            <label for="username" class="block text-sm text-gray-700 mb-1">用户名</label>
            <div class="relative">
              <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                <font-awesome-icon :icon="['far', 'user']" class="text-gray-400" />
              </div>
              <input 
                v-model="username"
                type="text" 
                id="username" 
                name="username" 
                class="block w-full pl-10 pr-3 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-1 focus:ring-rose-500" 
                placeholder="请输入用户名" 
                required
              >
            </div>
          </div>
          
          <!-- 密码 -->
          <div class="mb-6">
            <label for="password" class="block text-sm text-gray-700 mb-1">密码</label>
            <div class="relative">
              <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                <font-awesome-icon icon="lock" class="text-gray-400" />
              </div>
              <input 
                v-model="password"
                :type="showPassword ? 'text' : 'password'" 
                id="password" 
                name="password" 
                class="block w-full pl-10 pr-10 py-2 border border-gray-200 rounded-lg focus:outline-none focus:ring-1 focus:ring-rose-500"
                placeholder="请输入密码" 
                required
              >
              <!-- 添加查看密码按钮 -->
              <button 
                type="button" 
                @click="togglePasswordVisibility" 
                class="absolute inset-y-0 right-0 pr-3 flex items-center"
              >
                <font-awesome-icon :icon="showPassword ? 'eye' : 'eye-slash'" class="text-gray-500" />
              </button>
            </div>
          </div>
          
          <!-- 错误消息 -->
          <div v-if="errorMessage" class="mb-4 text-red-500 text-center text-sm">
            {{ errorMessage }}
          </div>
          
          <!-- 登录按钮 -->
          <button
            type="submit"
            :disabled="isLoading"
            class="w-full bg-rose-500 hover:bg-rose-600 disabled:bg-gray-400 text-white py-3 rounded-lg transition duration-300"
          >
            {{ isLoading ? '登录中...' : '登录' }}
          </button>
          
          <!-- 忘记密码 -->
          <div class="mt-4">
            <a href="#" class="text-gray-600 text-sm hover:text-gray-800">忘记密码?</a>
          </div>
        </form>
      </div>
      
      <!-- 注册链接 -->
      <div class="mt-6 text-center">
        <p class="text-gray-600">还没有账号? <router-link to="/register" class="text-rose-500 font-medium">立即注册</router-link></p>
      </div>
    </div>
    
    <!-- 页脚 -->
    <div class="py-6 text-center">
      <p class="text-gray-500 text-sm">© 2023 花礼相伴鲜花配送网站. 所有权利保留.</p>
      <div class="flex justify-center space-x-4 mt-2">
        <a href="#" class="text-gray-500 hover:text-rose-500">
          <font-awesome-icon :icon="['fab', 'weixin']" />
        </a>
        <a href="#" class="text-gray-500 hover:text-rose-500">
          <font-awesome-icon :icon="['fab', 'weibo']" />
        </a>
        <a href="#" class="text-gray-500 hover:text-rose-500">
          <font-awesome-icon icon="envelope" />
        </a>
      </div>
    </div>
  </div>
</template>

<style scoped>
.login-container {
  width: 100%;
  min-height: 100vh;
  margin: 0;
  padding: 0;
}

/* 让login-container填满整个视口 */
:deep(.login-container) {
  height: 100vh;
}

/* 移除原有的背景设置，改用全局 */
:deep(body) {
  background-color: #f8f8f8;
}
</style> 